<script setup>

import JSRunner from 'js-execute'
import { onMounted } from 'vue';

const runner = new JSRunner((val) => {
    console.log('val', val)
    document.getElementById('codeResult').value = `
      ${JSON.stringify(val)}
    `
  });

const execute = () => {
  let code = document.getElementById('codeInput').value;
  runner.execute(code, { c: 3 });
}

onMounted(() => {
  document.getElementById('codeInput').value = `
    let a = 1;
    let b = 2;
    let c = this.c
    return a + b + c
  `
})

</script>

<template>
  <div style="display: flex; flex-direction: column; margin: 10px">
    js code: 
    <textarea cols="30" rows="6" id="codeInput"></textarea><br/>
  </div>

  <button @click="execute" style="border: 1px solid gainsboro">run</button>

  <div style="display: flex; flex-direction: column; margin: 10px;">
    runner result: 
    <textarea cols="30" rows="6" id="codeResult"></textarea><br/>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
